<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div class="box">
	<!-- <select v-model="sheng" @blur="sheng1()">
		<option :value="item.name" v-for="(item,index) in arr" :key="index">{{item.name}}</option>
	</select>
	<select v-model="shi" @blur="shi1()">
		<option :value="item.name" v-for="(item,index) in shi_arr" :key="index">{{item.name}}</option>
	</select>
	<select v-model="qu">
		<option :value="item" v-for="(item,index) in qu_arr" :key="index">{{item}}</option>
	</select>
	-->
	<!-- {{sheng}}{{shi}}{{qu}} -->
	<select v-model="num1">
		<option :value="index" v-for="(item,index) in arr" :key="index">{{item.name}}</option>
	</select>
	<select v-model="num2">
		<option :value="index" v-for="(item,index) in arr[num1].city" :key="index">{{item.name}}</option>
	</select>
	<select :value="num3">
		<option :value="index" v-for="(item,index) in arr[num1].city[num2].districtAndCounty" :key="index">{{item}}
		</option>
	</select>
</div>
<script>
	new Vue({
		el: ".box",
		data: {
			arr: [{
				name: "河北省",
				city: [{
					name: "石家庄市",
					districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
				}, {
					name: "张家口市",
					districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
				}, {
					name: "承德市",
					districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
				}, {
					name: "秦皇岛市",
					districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
				}]
			}, {
				name: "山西省",
				city: [{
					name: "太原市",
					districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
				}, {
					name: "朔州市",
					districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
				}, {
					name: "大同市",
					districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
				}, {
					name: "阳泉市",
					districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
				}]
			}],
			shi_arr: [],
			qu_arr: [],
			// sheng: this.arr[this.num1].name,
			// shi: this.arr[this.num1].city[this.num2].name,
			// qu: this.arr[this.num1].city[this.num2].districtAndCounty[this.num3],
			num1: 0,
			num2: 0,
			num3:0
		},
		methods: {
			sheng1() {
				shi_arr = []
				this.arr.forEach(item => {
					if (this.sheng == item.name) {
						this.shi_arr = item.city
					}
				});
			},
			shi1() {
				this.qu_arr = []
				this.arr.forEach(item => {
					if (this.sheng == item.name) {
						item.city.forEach(item2 => {
							if (this.shi == item2.name) {
								this.qu_arr = item2.districtAndCounty
							}
						})
					}
				})
			}
		}
	})
</script>